<template>
  <div class="wrap">
    <Form :model="formState" :label-width="80" v-if="!liveStart">
      <FormItem label="标题:">
        <Input
          v-model="formState.title"
          placeholder="Enter something..."
        ></Input>
      </FormItem>
      <FormItem label="封面:">
        <img width="50px" height="50px" :src="formState.coverImage" alt="">
        <upload class="upload" @uploadSuccess="handleSuccess"></upload>
        <Input
          v-model="formState.coverImage"
          placeholder="Enter something..."
        ></Input>
      </FormItem>
      <FormItem label="简介:">
        <Input
          v-model="formState.introduction"
          placeholder="Enter something..."
        ></Input>
      </FormItem>
      <div class="btn">
        <Button type="primary" @click="startLive()">开启直播</Button>
      </div>
    </Form>
    <div class="" v-else="">
      <p class="back" @click="liveStart = !liveStart"><返回</p>
      <Form :model="formState" :label-width="80">
        <FormItem label="rtmp地址:">
          {{ rtmp }}
        </FormItem>
        <FormItem label="直播码:">
          {{ code }}
        </FormItem>
        <div class="btn">
          <Button type="primary" @click="intoLive()">进入直播间</Button>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>
import upload from "@/components/upload/upload.vue";
import { rtmp } from "@/config/config";

export default {
  components:{
    upload
  },
  data() {
    return {
      formState: {
        coverImage:''
      },
      liveStart: false,
      rtmp: rtmp,
      code: "",
      roomID: "",
    };
  },
  methods: {
    startLive() {
      this.HttpService.postLive(this.formState).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.$Message.success(res.message);
          this.liveStart = true;
          this.code = res.data.code;
          this.roomID = res.data.id;
        }
      });
    },
    intoLive() {
      this.$router.push({
        path: "/live",
        query: {
          id: this.roomID,
        },
      });
    },
    // upload
    handleSuccess(msg){
      console.log(msg)
      if(msg.code == 0){
        // 立即设置会报404,可能还没获取到资源,因此延迟1s加载
        setTimeout(() =>{
          let url = 'https://localhost:3333' + msg.finalPath + '.jpg'
          console.log(url);
          this.formState.coverImage = url
        },2000)
      }
    },
  },
};
</script>

<style lang='less' scoped>
.wrap {
  margin-top: 20px;
  padding-right: 50px;
  .btn {
    text-align: center;
  }
}
.back {
  position: relative;
  left: 15px;
  bottom: 10px;
  color: var(--theme-color);
}
</style>
